<template>
	<view class="search-box">
		<TopHead :title="'搜索'"></TopHead>
		<view class="conbox">
			<view class="searchBox">
				<uni-icons type="search" color="#5d4529;" class="searchIcon" size="26"></uni-icons>
				<!-- <text>搜索商品或者服务名称</text> -->    
				<input class="uni-input"  placeholder="搜索商品或者服务名称" />
				<text class="btn">搜索</text>
			</view>
			<view class="history">
				<text class="his-left"></text>
				<text class="his-text">历史搜索</text>
			</view>
			<view class="history2">
				<text>咖啡</text>
				<text>奶茶</text>
				<text>奶茶</text>
			</view>
			<goods-list :list="goodsList"></goods-list>
			
		</view>
	</view>
</template>

<script>
	import TopHead from '../../components/topHead/topHead.vue';
	import GoodsList from '../../components/basics/goodsList.vue';
	export default {
		components: {
			TopHead,GoodsList
		},
		data() {
			return {
				goodsList:[],


			}
		},
		onLoad() {

		},
		onShow() {

			// this.initData()
		},
		onReachBottom() {
			// 触底分页
			console.log('触底')
			// if (this.total > this.list.length) {
			// 	this.page = parseInt(this.page) + 1
			// }
		},
		methods: {
			// 数据请求示例
			initData() {
				let _this = this;
				_this.$http.fetchData({
					url: '/api/biaoduan',
					method: 'GET',
					data: {},
					success(res) {
						// uni.showToast({
						// 	title: res.message,
						// 	icon: 'none'
						// });
						_this.list = [..._this.list, ...res.data]
						this.total = res.total
						let listData = res.data
						if (res.total == 1) {
							let id = listData[0].id
							let total = this.total
							let paramsStr = `?biaoduan_id=${id}&biaoduanTotal=${total}`
							uni.redirectTo({
								url: `/pages/procedureList/procedureList${paramsStr}`
							})
						}
					}
				})
			},
			// dianhua
			phoneCall(item) {
				uni.makePhoneCall({
					phoneNumber: '023-62433333' //仅为示例
				});
			},


		}
	}
</script>

<style scoped>
	.search-box {
		background: #f3f3f3;
		height: 100%;
	}
	.headBox {
		font-size: 36rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		font-weight: 700;
		text-align: center;
		color: #232323;
		padding-top: 88rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-bottom: 112rpx;
		background: linear-gradient(89deg, #f9d7a6 1%, #ffdc95 100%);
	}

	.headBox .wzText {
		line-height: 56rpx;
	}

	.searchBox {
		height: 80rpx;
		line-height: 80rpx;
		background: #fff;
		border-radius: 40rpx;
		box-sizing: border-box;
		padding-left: 24rpx;
		position: relative;
		overflow: hidden;
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		margin-top: 30rpx;
		color: #5d4529;
		display: flex;
	}

	.searchBox .searchIcon {
		vertical-align: middle;
		flex-shrink: 0;
	}
	.uni-input {
		flex: 1;
		height: 80rpx;
	}

	.searchBox .btn {
		flex-shrink: 0;
		width: 144rpx;
		height: 80rpx;
		background: #d97e35;
		/* position: absolute;
		right: 0;
		top: 0;
		bottom: 0; */
		border-top-left-radius: 40rpx;
		text-align: center;
		line-height: 80rpx;
		color: #fff;
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;

	}

	.conbox {
		padding: 30rpx;
		padding-top: 166rpx;
	}
	.history {
		margin-top: 38rpx;
	}
	.history .his-left{
		display: inline-block;
		width: 8rpx;
		height: 36rpx;
		background: #e47917;
		border-radius: 4rpx;
		vertical-align: middle;
		margin-right: 15rpx;
	}
	.history .his-text {
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		font-weight: 700;
		color: #e47917;
	}
	.history2 {
		padding: 20rpx 0;
	}
	.history2 text {
		display: inline-block;
		text-align: center;
		line-height: 78rpx;
		padding: 0 72rpx;
		margin-right: 26rpx;
		background: #ededed;
		border: 2rpx solid rgba(189,189,189,0.20);
		border-radius: 42rpx;
		margin-bottom: 20rpx;
	}
	.history2 text:nth-child(3n) {
		margin-right: 0;
	}
	
</style>